#######################################################
# ****************** 自定义组件声明区 ****************** #
#######################################################
# 自定义BoxLayout标签
<RowLayout@BoxLayout>:
  font_size: 18
  size_hint: (1, None)
  height: 45 # 设置高度固定35，需要先将size_hint的高度设为None
#  canvas.before:
#    Color:
#      rgba: 0, 0, 1, .5  # 设置颜色为红色
#    Line:
#      width: 1  # 设置边框宽度
#      rectangle: self.x, self.y, self.width, self.height
#  pos_hint: {"center_x": .5, "center_y": 0}

# 自定义BoxLayout标签
<ColLayout@BoxLayout>:
  padding: 5, 5, 5, 5
  canvas.before:
    Color:
      rgba: 0, 1, 0, .5  # 设置颜色为红色
    Line:
      width: 1  # 设置边框宽度
      rectangle: self.x, self.y, self.width, self.height
#  pos_hint: {"center_x": .5, "center_y": 0}

# 自定义label标签
<LabelComm@Label>:
  font_size: 18
  markup: True
  color: 0, 0, 0, 1  # 设置文字颜色
  size_hint: (.2, None) # 宽度为20%，高度不设置
  height: 35 # 设置高度固定35，需要先将size_hint的高度设为None
  text_size: self.size
  valign: 'middle'
  halign: 'left'
  pos_hint: {"center_x": 0.5, "center_y": 0.5} # 居中显示

# 自定义TextInput标签
<TextInputComm@TextInput>:
  font_size: 18
  size_hint: (.8, None)
  height: 35
  pos_hint: { "center_x": 0.5, "center_y": 0.5 } # 居中显示
  foreground_color: 0, 0.5, 0.7, 1  # 设置文字为蓝灰色
  background_color: 1, 1, 1, 0.2  # 设置背景为白色半透明
  write_tab: False # 通过禁止输入tab键实现按tab键在多个输入框之间切换

# 自定义CheckBox标签
<CheckBoxComm@CheckBox>:
  size_hint: None, None
  size: 30, 30
  color: 1, 0, 0, 1   # 设置选择框体颜色,除canvas设置颜色用Color,其他均为color.
  pos_hint: {"center_x": 0, "center_y": 0.5}
#  background_checkbox_normal: "path_to_normal_image"
#  background_checkbox_down: "path_to_down_image"
#  background_checkbox_disabled_normal: "path_to_disabled_normal_image"
#  background_checkbox_disabled_down: "path_to_disabled_down_image"
#  canvas.before:
#    Color:
#      rgba: .5, 1, 0, .5
#    Line:
#      width: 1  # 设置边框宽度
#      rectangle: self.x, self.y, self.width, self.height

# 自定义Spinner组件
<SpinnerComm@Spinner>:
  size_hint_y: None
  height: 30
  pos_hint: { "center_x": 0, "center_y": 0.5 }
  sync_height: True # 不设置sync_height时 height不会应用到下拉框里
  canvas.before:
    Color:
      rgba: .5, 1, 0, .7
    Line:
      width: 1  # 设置边框宽度
      rectangle: self.x, self.y, self.width, self.height

# 自定义按钮
<ButtonComm@Button>:
  font_size: 18
  color: 0, 0, 0, 1  # 设置文字颜色
  size_hint: None, None
  size: 100, 35 # 设置按钮固定大小，需要先设置size_hint为None
  # pos_hint: {"center_x": 0.5, "center_y": 0.5}
  # bold: True
  # border: 1, 0, 0, 1
  background_color: 0.529, 0.808, 0.922, 0.7 # 按钮背景颜色
  canvas.before:
    Color:
      rgba: 0, .8, .8, .5  # 设置颜色为红色
    Line:
      width: 1  # 设置边框宽度
      rectangle: self.x, self.y, self.width, self.height

# 自定义下拉框
<DropDownComm@DropDown>:


# **************** 自定义组件声明区 end **************** #
#######################################################



#######################################################
# ********************* 画面实现 ********************* #
#######################################################
FormLayout:
  name: 'ticket_page'
  image: 'yangshuo.jpg' # 定义一个图片路径
  font_size: 28
  canvas:
    Rectangle:
      size: self.size
      pos: self.pos
      source: root.image # 引用图片路径设置背景图
  AnchorLayout:
    anchor_x: "center"
    anchor_y: "center"
    canvas.before:
      Color:
        rgba: 1, 0, 0, .5  # 设置颜色为红色
      Line:
        width: 1  # 设置边框宽度
        rectangle: self.x, self.y, self.width, self.height
    BoxLayout:
      size_hint: 0.9, 0.9

      orientation: "vertical"
      canvas.before:
        Color:
          rgba: 1, 0, 0, .51  # 设置颜色为红色
        Line:
          width: 1  # 设置边框宽度
          rectangle: self.x, self.y, self.width, self.height
      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            text: "手机："
        ColLayout:
          TextInputComm:
            id: tel
      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            text: "模式："
        ColLayout:
          CheckBoxComm:
            group: 'pattern'    # 设置group就变成单选框
            id: grap
            text: '00'
            on_active: root.pattern_check(self)
          LabelComm:
            text: '抢票'
            size_hint_x: None
            width: 50
            on_touch_down:
              if self.collide_point(*args[1].pos): grap.active = not grap.active  # 切换 CheckBox 状态(if中的条件是判断点击是否在当前组件内)
          CheckBoxComm:
            group: 'pattern'    # 设置group就变成单选框
            id: monitor
            text: '01'
            on_active: root.pattern_check(self)
          LabelComm:
            text: '监控'
            size_hint_x: None
            width: 50
            on_touch_down:
              if self.collide_point(*args[1].pos): grap.active = not grap.active  # 切换 CheckBox 状态(if中的条件是判断点击是否在当前组件内)
      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            text: "执行时间："
        ColLayout:
          LabelComm:
            text: '时'
            size_hint_x: None
            width: 20
          SpinnerComm:
            id: time_hour
            values: [ "{:02d}".format(i) for i in range(24) ]  # 小时选择范围
            size_hint_x: None
            width: "40"
          LabelComm:
            text: '分'
            size_hint_x: None
            width: 20
          SpinnerComm:
            id: time_minute
            values: [ "{:02d}".format(i) for i in range(60) ]  # 分钟选择范围
            size_hint_x: None
            width: "40"
          LabelComm:
            text: '秒'
            size_hint_x: None
            width: 20
          SpinnerComm:
            id: time_second
            values: [ "{:02d}".format(i) for i in range(60) ]  # 秒钟选择范围
            size_hint_x: None
            width: "40"
      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            text: "策略："
        ColLayout:
          CheckBoxComm:
            group: 'strategy'    # 分组名
            id: strategy_00  # 添加ID属性
            text: '00'
            on_active: root.strategy_check(self)
          LabelComm:
            text: '日期'
            size_hint_x: None
            width: 50
            on_touch_down:
              if self.collide_point(*args[1].pos): strategy_00.active = not strategy_00.active  # 切换 CheckBox 状态(if中的条件是判断点击是否在当前组件内)
          CheckBoxComm:
            group: 'strategy'    # 分组名
            id: strategy_01  # 添加ID属性
            text: '01'
            on_active: root.strategy_check(self)
          LabelComm:
            text: '天'
            size_hint_x: None
            width: 50
            on_touch_down:
              if self.collide_point(*args[1].pos): strategy_01.active = not strategy_01.active  # 切换 CheckBox 状态(if中的条件是判断点击是否在当前组件内)
          CheckBoxComm:
            group: 'strategy'    # 分组名
            id: strategy_02  # 添加ID属性
            text: '02'
            on_active: root.strategy_check(self)
          LabelComm:
            text: '周'
            size_hint_x: None
            width: 50
            on_touch_down:
              if self.collide_point(*args[1].pos): strategy_02.active = not strategy_02.active  # 切换 CheckBox 状态(if中的条件是判断点击是否在当前组件内)
      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            text: "门票场次："
        ColLayout:
          BoxLayout:
            ButtonComm:
              padding: 5, 5, 5, 5
              size_hint_x: 1
              color: 0, 0, 0, 1  # 设置文字颜色为红色
              id: ground_ids
              text: "请选择门票场次"
              text_size: self.size
              halign: 'left'
              valign: 'middle'
              on_parent: ground_ids_dropdown.dismiss()
              on_release: ground_ids_dropdown.open(self)
            MultiSelectDropDown:
              id: ground_ids_dropdown
              main_button: ground_ids
              options: [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15' ]

      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            text: "门票时间："
        ColLayout:
          BoxLayout:
            ButtonComm:
              padding: 5, 5, 5, 5
              size_hint_x: 1
              color: 0, 0, 0, 1  # 设置文字颜色为红色
              id: time_ids
              text: "请选择门票时间"
              text_size: self.size
              halign: 'left'
              valign: 'middle'
              on_parent: time_ids_dropdown.dismiss()
              on_release: time_ids_dropdown.open(self)
            MultiSelectDropDown:
              id: time_ids_dropdown
              main_button: time_ids
              options: [ '09:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00' ]

      RowLayout:
        ColLayout:
          size_hint_x: None
          width: 130
          LabelComm:
            id: test_label
            text: "测试字段："
        ColLayout:
          TextInputComm:
            id: test_input
      RowLayout:
        ColLayout:
          spacing: 10
          padding: self.width*0.5-120, 0, 0, 5
          ButtonComm:
            id: commit
            text: "保存"
            on_release: root.commit_form()
          ButtonComm:
            id: reset
            text: "重置"
            on_release: root.reset_form()
      BoxLayout:
        orientation: 'vertical'
        #        padding: 0, 15, 0, 0
        RowLayout:
          LabelComm:
            text: "序号"
          LabelComm:
            text: "手机"
          LabelComm:
            text: "模式"
          LabelComm:
            text: "执行时间"
          LabelComm:
            text: "策略"
          LabelComm:
            text: "策略值"
          LabelComm:
            text: "门票场次"
          LabelComm:
            text: "门票场地"
        BoxLayout:
          id: ticket_content
          canvas.before:
            Color:
              rgba: 1, 0, 0, .5  # 设置颜色为红色
            Line:
              width: 1  # 设置边框宽度
              rectangle: self.x, self.y, self.width, self.height
          orientation: 'vertical'
          BoxLayout:
            id: ticket_blank
            LabelComm:
              text: "空白"
          BoxLayout:
            id: ticket_table
            RowLayout:
              LabelComm:
                text: "id"
              LabelComm:
                text: "var1"
              LabelComm:
                text: "var2"
              LabelComm:
                text: "var3"
              LabelComm:
                text: "var4"
              LabelComm:
                text: "var5"
              LabelComm:
                text: "var5"
              LabelComm:
                text: "var7"

